<template>
	<a-form-item
      :class="[hasError ? 'hhg-form-item-has-error' : '']"
	:label="labelName"
	:name="name"
	:rules="rules">
		<a-checkbox-group v-model="value" v-bind="attrs" :class="[ verticalClass ? 'checkbox-row' : '' ]" @change="selectCheck">
			<a-checkbox v-for="item in checkList" :key="item.value" :value="item.value" :disabled="item.disabled">{{ item.label }}</a-checkbox>
		</a-checkbox-group>
	</a-form-item>
</template>
<script setup>
import { onMounted, useAttrs, defineProps, ref, watch, defineEmits } from 'vue'
import _ from 'lodash'
//组件属性穿透
const attrs = useAttrs()
const props = defineProps({
	config: {
            type: Object,
            default: ()=> {}
      }
})
const checkList = ref(props.config.list)
const verticalClass = ref(props.config.vertical)
const value = ref('')
const emits = defineEmits(['selectCheck'])

const labelName = ref(props.config.labelName)
const name = ref(props.config.name)
const hasError = ref(props.config.hasError ? props.config.hasError : false)
const rules = ref(props.config.rules)
watch(() => props.config, (val) => {
if (!_.isEmpty(val.list)) {
	checkList.value = val.list
  }
}, { immediate: true }, { deep: true })
const selectCheck = value=> {
	const list = checkList.value.filter(item => value.indexOf(item.value) !== -1 && typeof item.value === typeof value[value.indexOf(item.value)])
	const data = {
		value,
		list
	}
	emits('selectCheck', data)
}

// mounted
onMounted(() => {
})

</script>
<style scoped lang="scss"></style>